<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<fieldset>
    <legend>Ajax 表单请求</legend>
    <form enctype="application/x-www-form-urlencoded">
        <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
        <input>
        <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="result"></span>
</fieldset>
</body>
<script type="text/javascript">
    (function(){
        //定义一个函数，可以将其连接为java中的类
        var ajax=function(){}
        //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
        ajax.prototype={
            doAjaxGet:function(url,params,callback){
                //创建XMLHttpRequest对象，基于此对象发送请求
                var xhr=new XMLHttpRequest();
                //设置状态监听(监听客户端与服务端通讯的状态)
                xhr.onreadystatechange=function(){//回调函数，事件处理函数
                    if(xhr.readyState==4&&xhr.status==200){
                        //console.log(xhr.responseText);
                        callback(xhr.responseText);//jsonStr
                    }
                };
                //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
                xhr.open("GET",url+"?"+params,true);
                //发送请求
                xhr.send(null);//GET请求send方法不写内容
            },

            doAjaxPost:function(url,params,callback){
                //创建XMLHttpRequest对象，基于此对象发送请求
                var xhr=new XMLHttpRequest();
                //设置状态监听(监听客户端与服务端通讯的状态)
                xhr.onreadystatechange=function(){//回调函数，事件处理函数
                    if(xhr.readyState==4&&xhr.status==200){
                        //console.log(xhr.responseText);
                        callback(xhr.responseText);//jsonStr
                    }
                };
                //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
                xhr.open("POST",url,true);
                //post请求传参时必须设置此请求头
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                //发送请求
                xhr.send(params);//post请求send方法中传递参数
            }
        }
        window.Ajax=new ajax();
    })()
    function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
        //1.定义请求url
        var url="doCheck";
        //2.定义请求参数
        var name=document.forms[0].name.value;
        var params="name="+name;
        //3.发送异步Get请求
        Ajax.doAjaxGet(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        })
    }
    function doSave(){
        //1.定义请求url
        var url="doSave";
        //2.定义请求参数
        var params="name="+document.forms[0].name.value;
        //3.发送异步的post请求
        Ajax.doAjaxPost(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        })
    }
    function doClear(){
        document.getElementById("result").innerHTML="";
    }
</script>
</html>